$(function(){
  const layer = layui.layer

  // 1.输入手机号点击下一步，注册事件
  $('#btnNext').on('click',function(){
    const phone = $('#phone').val()
    
    $.ajax({
      method:'GET',
      url:'http://124.223.14.236:3001/api/user/findPwd',
      data:{phone},
      success:function(res) {
        console.log(res)
        if(!res.success) return layer.msg('手机号输入错误')

        // 2.点击box1 下一步第一个隐藏，第二个显示
        $('.box1').css('display','none')
        $('.box2').css('display','block')
        renderBox2(res.data)
      }
    })
  })
  
  // 3.点击box1 上一步第一个显示第二个隐藏
  $('#btnTop').on('click',function(){
    $('.box2').css('display','none')
    $('.box1').css('display','block')
  })


  // 3.渲染第二个盒子
  function renderBox2(data) {
    // console.log(data)
    // 赋值
    $('[type="hidden"]').val(data.id)
    $('[type="username"]').val(data.username)
    $('[type="phone"]').val(data.phone)
    $('[type="question"]').val(data.question)

    // 点击第二个盒子下一步，隐藏第二个盒子，显示第三个盒子
    $('#btnBox2next').on('click',function(){
      $('.box2').css('display','none')
      $('.box3').css('display','block')
    })

    // 点击第二个盒子上一步，隐藏第三个，显示第二个
    $('#btnTop2').on('click',function(){
      $('.box3').css('display','none')
      $('.box2').css('display','block')
    })
  }

  // 4.点击立即重置提交数据
  $('#reset').on('click',function(){
    const id = $('[type="hidden"]').val()
    const answer = $('#answer').val()
    const password = $('#newPwd').val()

    $.ajax({
      method:'POST',
      url:'http://124.223.14.236:3001/api/user/resetPwd',
      data:{
        id,
        password,
        answer
      },
      success:function(res){
        if(!res.success) return layer.msg('密保问题回答错误')
        layer.msg('重置成功')
        // 重置成功删除本地token，并跳转登录
        localStorage.removeItem('token')
        setTimeout(function(){
          location.href = '/loginBaseCode/login.html'
        },800)
      }
    })
  })
})